import './index.css';

import {
  useEffect,
  useState,
} from 'react';

import { Collapse } from 'antd';

import { LeftCircleOutlined } from '@ant-design/icons';

const { Panel } = Collapse;

const NftCard = (props) => {
  const [nftdata, setnftdata] = useState([]);

  useEffect(() => {
    setnftdata(props.ListData);
  }, [nftdata]);

  return (
    <>
      {nftdata.length !== 0 ? (
        <>
          {nftdata.map((item,index) => (
            <div className="nft-mobile" key={item.id}>
              <div className="nft-mobile-img">
                <button>But now</button>    
              </div>
              <div className="nft-mobile-info">
                <div className="nft-mobile-info-title">{item.title}</div>
                <div className="nft-mobile-info-pr-title">Price</div>
                <div className="nft-mobile-info-pr">
                  <span></span>
                  <p>{item.price}</p>
                </div>

                <Collapse
                  bordered={false}
                  expandIcon={({ isActive }) => (
                    <LeftCircleOutlined rotate={isActive ? -90 : 0} />
                  )}
                >
                  <Panel header="Limited Edition 1000/1000 Available" key={index + 1}>
                    <span>{item.description}</span>
                  </Panel>
                </Collapse>
              </div>
            </div>
          ))}
        </>
      ) : (
        ""
      )}
    </>
  );
};


export default NftCard;
